<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="search">
            <div class="search-title">床位：</div>
            <el-row :gutter="20">
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-select
                  v-model="selectForm.politicalStatus"
                  clearable
                  placeholder="楼号"
                  filterable
                  size="medium"
                >
                  <el-option :key="0" label="一号" :value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-select
                  v-model="selectForm.politicalStatus"
                  clearable
                  placeholder="楼层"
                  filterable
                  size="medium"
                >
                  <el-option :key="0" label="一号" :value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-select
                  v-model="selectForm.politicalStatus"
                  clearable
                  placeholder="类型"
                  filterable
                  size="medium"
                >
                  <el-option :key="0" label="一号" :value="0"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
          <div class="fr">
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="selectArr.includes(tag.id)"
              :color="selectArr.includes(tag.id) ? tag.color : ''"
              size="medium"
              :class="{ active: selectArr.includes(tag.id) }"
              :data-id="tag.id"
              @click="handleFilter"
              @close="handleClose(tag.id)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card-container">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>跌倒报警</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[2]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[2]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[3]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[3]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[1]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[1]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
          <el-card shadow="hover" :class="backgroundColor[0]">
            <div style="width: 100%; height: auto">
              <div class="item">
                <span>101</span>
                <vab-icon
                  class="header_icon"
                  :icon="['fas', icon[0]]"
                ></vab-icon>
                <span>无人进入</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        :background="background"
        :current-page="pageNo"
        :layout="layout"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index",
    components: {},
    data() {
      return {
        pageNo: 1,
        pageSize: 10,
        layout: "total, prev, pager, next, jumper",
        total: 0,
        background: true,
        selectArr: [0, 1, 2, 3],
        icon: ["male", "pray", "bell", "male"],
        backgroundColor: [
          "colorType0",
          "colorType1",
          "colorType2",
          "colorType3",
        ],
        tags: [
          { name: "有人进入(5)", color: "#E0C720", id: 0 },
          { name: "跌倒报警(2)", color: "#E5362A", id: 1 },
          { name: "紧急呼叫(2)", color: "#C400D2", id: 2 },
          { name: "无人进入(100)", color: "#18BA39", id: 3 },
        ],
        formData: {},
        selectForm: {},
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {},
    methods: {
      handleFilter(e) {
        let id = e.currentTarget.dataset.id;
        console.log(id);
        if (this.selectArr.indexOf(parseInt(id)) === -1) {
          this.selectArr.push(parseInt(id));
        }
      },
      handleClose(id) {
        if (this.selectArr.indexOf(parseInt(id)) !== -1) {
          this.selectArr.splice(this.selectArr.indexOf(parseInt(id)), 1);
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        // this.fetchData();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        // this.fetchData();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        display: flex;
        .search-title {
          flex: 0 0 48px;
          width: 48px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
      }
      .el-tag {
        background: none;
        border: 1px solid #dddfe7;
        color: #333;
        line-height: 34px;
        &.active {
          border: none;
          color: #fff;
          line-height: 36px;
        }
      }
      .el-tag--medium {
        height: 36px;
        cursor: pointer;
        font-size: 14px;
        ::v-deep {
          .el-tag__close {
            color: #fff;
          }
        }
      }
    }
    .el-card {
      margin-bottom: 30px;
      border-radius: 4px;
      cursor: pointer;
      ::v-deep {
        .el-card__header {
          height: 48px;
          line-height: 48px;
          padding: 0 12px;
          background: #18ba39;
        }
        .el-card__body {
          padding: 0px;
          .item {
            display: flex;
            padding: 22px 16px;
            span {
              flex: 1;
              line-height: 26px;
              color: #fff;
              font-size: 18px;
              vertical-align: middle;
              &:first-child {
                flex: 0 0 60px;
                width: 60px;
              }
            }
            .header_icon {
              margin-right: 12px;
              color: #fff;
              font-size: 24px;
            }
          }
        }
      }
    }
    .el-card.colorType0 {
      ::v-deep {
        .el-card__body {
          background: #e0c720;
        }
      }
    }
    .el-card.colorType1 {
      ::v-deep {
        .el-card__body {
          background: #e5362a;
        }
      }
    }
    .el-card.colorType2 {
      ::v-deep {
        .el-card__body {
          background: #c400d2;
        }
      }
    }
    .el-card.colorType3 {
      ::v-deep {
        .el-card__body {
          background: #18ba39;
        }
      }
    }
  }
</style>
